<template>
  <div style="padding:15px;">
    <div style="background-color: white;height: 800px; overflow: auto">
      <div class="clearfix">
        <el-input
          class="searchDepartment"
          placeholder="输入项目编号搜索项目"
          prefix-icon="el-icon-search"
          v-model="searchContent"
          style="margin: 15px 15px;width: 250px;float: left"
          @input = "searchProject">
        </el-input>
        <el-button style="float: right; margin:15px 15px" type="primary" @click="addProject"><i class="el-icon-plus"></i> 新 建</el-button>
        <el-select v-model="value" placeholder="请选择" style="float: right;margin-top: 15px;width: 110px" @change="selectType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="margin: 0 15px;">
        <el-table
          :data="projectTable"
          stripe
          style="width: 100%;cursor: pointer"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @row-click="toProject">
          <el-table-column
            prop="projectName"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="principalName"
            label="项目负责人">
            <template slot-scope="scope">
              <el-avatar style="float:left; margin-top:3px;" size="small" :src="scope.row.circleUrl" v-if="scope.row.principalName !== '无'"></el-avatar>
              <span style="float:left;margin-left: 5px;margin-top: 8px">{{ scope.row.principalName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="项目状态">
          </el-table-column>
          <el-table-column
            prop="process"
            label="任务进度">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.process" :color="customColors"></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="创建时间">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes=  "[5,6,7,8]"
            :page-size= "PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total= "total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const axios = require('axios');
    export default {
        name: "allProjects",
        data(){
          return{
            //分页数据
            currentPage: 1,
            total: 0,
            PageSize: 5,

            //搜索内容
            searchContent: '',

            //筛选值
            value: 0,

            //判断是否在进行搜索
            isSearch:0,

            //筛选内容
            options: [{
              value: 0,
              label: '全部项目'
            }, {
              value: 1,
              label: '公有项目'
            }, {
              value: 2,
              label: '私有项目'
            },],

            //项目数据
            projectTable: [],

            customColors: [
              {color: '#f56c6c', percentage: 20},
              {color: '#e6a23c', percentage: 40},
              {color: '#5cb87a', percentage: 60},
              {color: '#1989fa', percentage: 80},
              {color: '#6f7ad3', percentage: 100}
            ],
          }
        },
      created() {
        axios.post('/getAllProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
          "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
          this.projectTable = res.data.list;
          this.total = res.data.total;
        })
      },
      methods: {
        //分页改变一页显示多少条
        handleSizeChange(val) {
          this.PageSize = val;
          if(this.isSearch == 0){
            switch (this.value) {
              case 0:
                axios.post('/getAllProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
                  "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
              case 1:
                axios.post('/getPublicProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
                  "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
              case 2:
                axios.post('/getPrivateProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
            }
          }else{
            axios.post('/findAllProject',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
              "content":this.searchContent,"enterpriseId":window.localStorage.getItem("enterprise_id")}).then(res => {
              this.projectTable = res.data.list;
              this.total = res.data.total;
            })
          }
        },
        //分页改变当前页
        handleCurrentChange(val) {
          this.currentPage = val;
          if(this.isSearch == 0){
            switch (this.value) {
              case 0:
                axios.post('/getAllProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
                  "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
              case 1:
                axios.post('/getPublicProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
                  "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
              case 2:
                axios.post('/getPrivateProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize}).then(res => {
                  this.projectTable = res.data.list;
                  this.total = res.data.total;
                })
                break;
            }
          }else{
            axios.post('/findAllProject',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
              "content":this.searchContent,"enterpriseId":window.localStorage.getItem("enterprise_id")}).then(res => {
              this.projectTable = res.data.list;
              this.total = res.data.total;
            })
          }
        },
        //添加项目
        addProject() {
          this.$emit('addProject')
        },

        //筛选项目
        selectType(val) {
          this.isSearch = 0;
          this.currentPage = 1;
           switch (val) {
             case 0:
               axios.post('/getAllProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
               "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                 this.projectTable = res.data.list;
                 this.total = res.data.total;
               })
               break;
             case 1:
               axios.post('/getPublicProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
                 "enterpriseId": window.localStorage.getItem("enterprise_id")}).then(res => {
                 this.projectTable = res.data.list;
                 this.total = res.data.total;
               })
               break;
             case 2:
               axios.post('/getPrivateProjectTable',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize}).then(res => {
                 this.projectTable = res.data.list;
                 this.total = res.data.total;
               })
               break;
           }
        },

        //搜索项目
        searchProject(){
          this.isSearch = 1;
          this.currentPage = 1;
          axios.post('/findAllProject',{"id":window.localStorage.getItem("id"),"pageCode":this.currentPage,"pageSize":this.PageSize,
            "content":this.searchContent,"enterpriseId":window.localStorage.getItem("enterprise_id")}).then(res => {
            this.projectTable = res.data.list;
            this.total = res.data.total;
          })
        },

        toProject(row){
          this.$router.push('/user/projects/projectDetail/overview/'+ row.id);
        }
      }
    }
</script>

<style scoped>

</style>
